<template>
    <div>
        <el-image v-for="(item, index) in list"
                  :style="style"
                  :src="src(item)"
                  :preview-src-list="previewSrcList(item)">
        </el-image>
    </div>
</template>

<script lang="ts">
    import {copy} from "@/core/utils/Utils";
    import {Component, Prop, Vue} from 'vue-property-decorator'

    @Component({
        name: 'ImageList'
    })
    export default class ImageList extends Vue {
        //*必传项-数据源
        @Prop({default: []}) list!: any;
        //*必传项-数据源类型 [string/object]
        @Prop({default: 'string'}) type!: any;
        //type=object时，传入KEY
        @Prop({default: 'url'}) key!: any;
        //默认图片地址
        @Prop({default: ''}) default!: any;

        @Prop({default: '80px'}) width!: any;
        @Prop({default: '80px'}) height!: any;
        @Prop({default: '0px'}) margin!: any;
        @Prop({default: '0px'}) marginTop!: any;
        @Prop({default: '0px'}) marginBottom!: any;
        @Prop({default: '0px'}) marginLeft!: any;
        @Prop({default: '10px'}) marginRight!: any;

        //返回URL
        src(item: any) {
            if (item) {
                if (this.type == "object") return item[this.key];
                if (this.type == "string") return item;
            }
            return this.default;
        }

        //返回数组
        previewSrcList(item: any) {
            let url = this.default;
            if (item) {
                if (this.type == "object") url = item[this.key];
                if (this.type == "string") url = item;
            }
            return [url];
        }

        get style() {
            return {
                width: this.width,
                height: this.height,
                margin: this.height,
                marginTop: this.marginTop,
                marginBottom: this.marginBottom,
                marginLeft: this.marginLeft,
                marginRight: this.marginRight,
            }
        }

        //初始化
        mounted() {
            this.list = copy(this.list);
            this.type = copy(this.type);
            if (this.list && this.type == "object" && typeof this.list == "string") {
                this.list = JSON.parse(this.list);
            }
            this.key = copy(this.key);
            this.width = copy(this.width);
            this.height = copy(this.height);
            this.margin = copy(this.margin);
            this.marginTop = copy(this.marginTop);
            this.marginBottom = copy(this.marginBottom);
            this.marginLeft = copy(this.marginLeft);
            this.marginRight = copy(this.marginRight);
            this.default = copy(this.default);


        }
    }
</script>

<style scoped>

</style>
